<script setup lang="ts">
import { ref } from '@vue/reactivity'
import returnHeader from '../components/returnHeader.vue'
import VShare from '../components/share.vue';
import html2canvas from "html2canvas"
import { onBeforeMount } from '@vue/runtime-core';
import {useRouter} from "vue-router"
import { useStore } from 'vuex';
const store = useStore()
const router = useRouter()
let canvas = ref()
let isSave = ref<boolean>(false)
const showShare = ref(false)
let weatherData = ref<any>(JSON.parse(localStorage.getItem('weather') + ''))
onBeforeMount(() => {
    console.log(store.state.imgSrc);
    src.value = store.state.imgSrc ?store.state.imgSrc:src.value 
    console.log(router.currentRoute.value.params);
})
let share = () => {
    showShare.value = true
}
const close = (params:boolean) => {
    showShare.value = params
    console.log(params);
}
// 生成快照
const convertToImage = (container: any, options = {}) => {
    // 设置放大倍数
    const scale = window.devicePixelRatio;

    // html2canvas配置项
    const ops = {
        scale,
        useCORS: true,
        allowTaint: false,
        ...options
    };

    return html2canvas(container, ops).then(canvas => {
        // 返回图片的二进制数据
        return canvas.toDataURL("image/png");
    });
}
let save = () => {
    isSave.value = true
    setTimeout(() => {
        convertToImage(canvas.value).then(url => {
            var a = document.createElement("a"); // 生成一个a元素
            var event = new MouseEvent("click"); // 创建一个单击事件
            a.download = "photo"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
            a.remove() // 移除dom元素
        })
    })
}
let message = ref<string>('')
let src = ref<string>('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1-lanrentuku.qqxzb-img.com%2F2020%2F11%2F11%2Fef6f5575-ee2f-4113-b471-b8f0becf98c3.jpg%3FimageView2%2F2%2Fw%2F1024&refer=http%3A%2F%2Fi-1-lanrentuku.qqxzb-img.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649202278&t=fa4a52655b070ad755d64d200d76b3c1')
</script>

<template>
    <div class="publishContainer">
        <return-header :title="'小记'" />
        <div class="publish-bgimg">
            <img class="bg-img" :src="src" alt="bg.jpeg" />
            <div class="icon-option">
                <div class="iconfont icon-tupian"></div>
                <div class="text">点击更改图片</div>
            </div>
        </div>
        <div class="bottom">
            <div class="address">
                <span class="iconfont icon-dingwei" style="color:#5a9adb"></span> <span v-if="weatherData">{{weatherData.city}}</span>
            </div>
            <div class="userName">影风</div>
        </div>
        <div class="publish-content">
            <van-cell-group inset>
                <van-field
                    v-model="message"
                    rows="6"
                    autosize
                    type="textarea"
                    maxlength="500"
                    placeholder="这一刻你想说什么？"
                    show-word-limit
                />
            </van-cell-group>
        </div>
        <div class="options">
            <div class="option-item" @click="save">
                <div class="iconfont icon-baocun"></div>
                <div class="text">保存</div>
            </div>
            <div class="option-item" @click="share">
                <div class="iconfont icon-fenxiangxiao"></div>
                <div class="text">分享</div>
            </div>
        </div>
    </div>
    <div>
        <v-share :showShare="showShare" @close="close"/>
    </div>
    <div class="share-content" v-show="isSave">
        <div class="saveImage" ref="canvas">
            <div class="publish-bgimg">
                <img class="bg-img" :src="src" alt="bg.jpeg" />
            </div>
            <div class="content">{{ message }}</div>
            <div class="userName">影风</div>
        </div>
    </div>
</template>

<style lang="less">
.share-content {
    position: absolute;
    top: 0;
    background: #fff;
    width: 100%;
    min-height: 100%;
    .publish-bgimg {
        width: 100%;
        img {
            width: 100%;
            height: auto;
        }
    }
    .content {
        text-align: center;
        margin: 20px;
    }
    .userName {
        margin-top: 40px;
        text-align: center;
    }
}
.publishContainer {
    position: relative;
    .publish-bgimg {
        margin-top: 50px;
        position: relative;
        height: 250px;
        overflow: hidden;
        .icon-option {
            text-align: center;
            display: block;
            width: 80px;
            height: 80px;
            margin: 100px auto 0;
            .icon-tupian {
                width: 50px;
                height: 50px;
                line-height: 50px;
                margin: auto;
                border-radius: 50%;
                color: #fff;
                font-size: 35px;
                background: rgba(0, 0, 0, 0.5);
            }
            .text {
                color: #fff;
                font-size: 13px;
            }
        }

        .bg-img {
            position: absolute;
            z-index: -1;
            width: 100%;
            height: auto;
        }
    }
    .bottom {
        display: flex;
        justify-content: space-between;
        margin: 20px;
        font-size: 14px;
        color: #999;
        line-height: 30px;
        .address {
            text-align: center;
            background: #dbdbdb;
            width: 60px;
            height: 30px;
            border-radius: 8px;
        }
    }
    .options {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        text-align: center;
        .option-item {
            margin: auto;
            width: 60px;
            height: 60px;
            color: #999;
            background: #fff;
            border-radius: 50%;
            box-shadow: 1px 1px 4px 1px #999;
            font-size: 13px;
            .iconfont {
                margin-top: 10px;
                font-size: 22px;
            }
        }
    }
}
</style>